<template>
  <div>
    <totalStatistic :total="studyTotalStatistic"> </totalStatistic> <!-- 学习统计数据 -->
    <div class="class_warp">
      <el-tabs v-model="activeTab" @tab-change="changeTabs"> <!-- @tab-click="changeTabs" -->
        <el-tab-pane label="校园课程" name="school"> </el-tab-pane>
        <el-tab-pane label="我的课程" name="user"> </el-tab-pane>
      </el-tabs>
      <div class="item-warp">
       <courseStudyProgressItem
        class="item"
          v-for="stdProgress in studyProgresses"
          :key="stdProgress.LessonId"
          :lesson="stdProgress"
          @checkLesson="checkLesson"
        ></courseStudyProgressItem>
        <el-empty v-if="studyProgresses.length <= 0"></el-empty>
      </div>
    </div>
    <el-pagination
      class="pagination"
      @current-change="getStudentLessons"
      :page-size="pageSize"
      hide-on-single-page
      layout="prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <eduDlg
      width="40%"
      v-model="dlg"
      title="全部课程"
      :showClose="true"
      :showBtn="false"
    >
    <div v-infinite-scroll="infinite_scroll_load" :infinite-scroll-disabled="disabled" style="max-height:600px;overflow:auto">
      <el-collapse v-model="activeLesson" accordion>
        <el-collapse-item
          v-for="(apter, index) in chooseLesson"
          :key="index"
          :title="apter.title"
          :name="apter.title"
        >
          <div
            class="chapterItem"
            flex="main:left cross:center"
            style="display:flex; justify-content:flex-start; align-items:center; "
            v-for="(lesson, chaptersIndex) in apter.lessonInfo"
            :key="chaptersIndex"
          >
            <p class="chapters_title text-ellipsis-single">{{ lesson.title }}</p>
            <span class="iconfont icon_play icon-bofang" @click="toPlay(apter,lesson)"></span>
          </div>
        </el-collapse-item>
      </el-collapse>
      </div>
    </eduDlg>
  </div>
</template>

<script>
import totalStatistic from "/@/components/userCenter/totalStatistic.vue";
import courseStudyProgressItem from "/@/components/userCenter/courseStudyProgressItem.vue";
import eduDlg from "/@/components/eduDlg.vue";
import { studyCenter as getStudyCenterStatisticInfo, studyProgressList } from "/@/api/studyApi";
import {courseTotalChapters } from "/@/api/course";

import router from '/@/router';

export default {
  components: {
    totalStatistic,
    courseStudyProgressItem,
    eduDlg,
  },
  data() {
    return {
      activeTab: "school",
      dlg: false,
      total: 0,
      pageSize: 20,
      activeLesson: "",
      studyTotalStatistic:{},
      chooseLesson:[],
      choosedClass:'',
      studyProgresses: [],
      activeLessonType:0 //0校园 1我的
    };
  },
  mounted() {
    this.getTotal();
    this.getStudentLessons()
  },
  methods: {

    infinite_scroll_load() { // 

    },
    toPlay(apter,lesson){ // 跳转播放
  
      router.push({name:'course-courseDetail',
        query: { 
          courseId:this.choosedClass.courseId, 
          chapterId:apter.chapterId,
          lessonId:lesson.lessonId
        }
      })
    },
    checkLesson(lessonItem) {
   
      this.choosedClass = 
      
      courseTotalChapters({courseId:lessonItem.courseId}).then(res=>{
          const {chapterInfos} = res;
          this.chooseLesson = chapterInfos;
          this.dlg = true;
      }).catch(()=>{})
      
    },
    changeTabs(elementName) {
      switch(elementName) {
        case 'school':
          this.activeLessonType =0; 
          break;
        case 'user':  
          this.activeLessonType =1; 
          break;
      }

      // console.log(elementName);
      // console.log(this.activeLessonType);
      this.getStudentLessons()
    },
    getTotal() {
      getStudyCenterStatisticInfo()
      .then((res) => {
        const { studentStatisticInfo } = res;
        this.studyTotalStatistic = studentStatisticInfo;
      })
      .catch(() => {});
    },

    getStudentLessons(page = 1, params = {}) {
      let offset = (page - 1) * this.pageSize;
      //console.log(this.activeLessonType);
      studyProgressList({
        offset: offset,
        size: this.pageSize,
        organCourseOnly: !this.activeLessonType,
        purchaseCourseOnly: !!this.activeLessonType,
        ...params,
      })
      .then((res) => {
        const { studyProgressInfos, total } = res;
        this.studyProgresses = studyProgressInfos || [];
        this.total = total;
      })
      .catch((err) => {
        console.error(err);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-icon-arrow-right:before {
  content: "";
}
.chapters_title {
  margin-right: 20px;
  font-size: 16px;
}
.progress {
  width: 40%;
  margin: 0 10px;
}
.item-warp{
  margin-top: 30px;
}
.class_warp {
  margin-top: 50px;
}
.icon_play {
  color: var(--el-color-primary);// $--color-primary;
  cursor: pointer;
  font-size: 30px;
}
.chapter_item {
  border-bottom: 1px solid var(--el-border-color-light);// $--border-color-light;
}
.item{
  margin-bottom: 20px;
}
</style>